<!DOCTYPE html>
<html lang="en"> 
<head> 
   
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title -->  
  <title>Gift Oasis | Gift Shop</title>  

  <!-- Favicon -->
   

  <!-- Font-Awesome (CSS) -->
  <link rel="stylesheet" href="static/css/all.min.css">
 
  <!-- Custom Stylesheets -->
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/responsive.css">

</head>
<body> 

  <!-- ==================== Scroll-Top Area (Start) ==================== -->
  <a href="#" class="scroll-top">
    <i class="fas fa-long-arrow-alt-up"></i>
  </a>
<header class="header">
  <div class="header-2">

    <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>

    <!-- == Logo == -->
    <a class="logo" href="index.html">
      <img src="static/picture/Logo.png" alt="logo">
      <div class="logo-name">
        <h3>礼物商城</h3>
      </div>
    </a>

    <div class="container">

      <!-- == Navbar == -->
      <nav class="navbar">

        <a class="nav-btn" href="index.html">首页</a>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="About.html">关于我们</a> </button>
          <div class="dropdown-content">

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn">登陆注册</a> <i class="fas fa-angle-down"></i> </button>
          <div class="dropdown-content">


            <a href="Login.html">login</a>
            <a href="Register.html">register</a>

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Categories.html">商品列表</a><i class="fas fa-angle-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="Product-Single.html">商品详情</a>
            <a href="Cart.html">购物车</a>
            <a href="Order-Single.html">订单详情</a>
          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Blog-Grid.html">新闻列表</a></button>
          <div class="dropdown-content">



          </div>
        </div>

        <a class="nav-btn" href="Contact.html">联系我们</a>

      </nav>

      <!-- == Icon Container == -->
      <div class="icon-container">
        <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
        <a href="Login.html" id="login" class="icon fas fa-user"></a>
        <a href="Cart.html" id="cart"> <!-- Cart Page Link -->
          <i class="icon fas fa-shopping-cart"></i>
          <span class="badge">5</span> <!-- Cart Items Count (Badge) -->
        </a>
      </div>

      <!-- == Search Container == -->
      <form class="search-container">
        <input type="search" id="search-bar" placeholder="search here" required=""> <!-- Search Input -->
        <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
      </form>

    </div>

  </div>
  <!-- ===== Header-2 Area (End) ===== -->

  <!-- ===== Mobile Menu Area (Start) ===== -->
  <div class="mobile-menu">

    <nav class="mobile-navbar">

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
        </div>
        <div class="sub-nav-link">

        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Login.html">login</a>
          <a href="Register.html">register</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Product-Single.html">商品详情</a>
          <a href="Cart.html">购物车</a>
          <a href="Order-Single.html">订单详情</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
      </div>

    </nav>

  </div>
  <!-- ===== Mobile Menu Area (End) ===== -->

</header>

  <!-- ==================== Page-Title (Start) ==================== -->
  <div class="page-title">

    <div class="title">
      <h2>Checkout</h2>
    </div> 

    <div class="link">
      <a href="index.html">Home</a>
      <i class="fa-solid fa-arrow-right-long"></i>
      <span class="page">Checkout</span>
    </div>

  </div>
  <!-- ==================== Page-Title (End) ==================== -->
  
 

  <!-- ==================== Checkout Area (Start) ==================== -->
  <section>

    <form action="#" class="checkout">

      <div class="box-1">

        <!-- ========== Billing-Address Area (Start) ========== -->
        <div class="billing address checkout-item">

          <div class="heading"> 
            <h2>发货地址</h2> 
          </div>

          <div class="form">

            <!-- First and Last name input -->
            <div class="input-box">
              <input type="text" name="first-name" placeholder="first name" id="b-first-name" class="box" required="">
              <input type="text" name="last-name" placeholder="last name" id="b-last-name" class="box" required="">
            </div>

            <!-- Company input -->
            <input type="text" name="company" placeholder="company" id="b-company" class="box" required="">

            <!-- Country input -->
            <input type="text" name="country" placeholder="country" id="b-country" class="box" required="">

            <!-- Address input -->
            <input type="text" name="address" placeholder="address" id="b-address" class="box" required="">

            <!-- City and ZIP input -->
            <div class="input-box">
              <input type="text" name="city" placeholder="town/city" id="b-city" class="box" required="">
              <input type="text" name="zip" placeholder="postcode/ZIP" id="b-zip" class="box" required="">
            </div>

            <!-- Phone and Email input -->
            <div class="input-box">
              <input type="number" name="number" placeholder="phone no" id="b-number" class="box" required="">
              <input type="email" name="email" placeholder="email address" id="b-email" class="box" required="">
            </div>

          </div>

        </div>
        <!-- ========== Billing-Address Area (End) ========== -->

        <!-- ========== Shipping-Address Area (Start) ========== -->
        <div class="shipping address checkout-item">

          <div class="heading"> 
            <h2>收货地址</h2> 
          </div>

          <!-- Shipping Address Form -->
          <div class="form">

            <!-- First and Last name input -->
            <div class="input-box">
              <input type="text" name="first-name" placeholder="first name" id="s-first-name" class="box" required="">
              <input type="text" name="last-name" placeholder="last name" id="s-last-name" class="box" required="">
            </div>

            <!-- Company input -->
            <input type="text" name="company" placeholder="company" id="s-company" class="box" required="">

            <!-- Country input -->
            <input type="text" name="country" placeholder="country" id="s-country" class="box" required="">

            <!-- Address input -->
            <input type="text" name="address" placeholder="address" id="s-address" class="box" required="">

            <!-- City and ZIP input -->
            <div class="input-box">
              <input type="text" name="city" placeholder="town/city" id="s-city" class="box" required="">
              <input type="text" name="zip" placeholder="postcode/ZIP" id="s-zip" class="box" required=""> 
            </div>

            <!-- Phone and Email input -->
            <div class="input-box">
              <input type="number" name="number" placeholder="phone no" id="s-number" class="box" required="">
              <input type="email" name="email" placeholder="email address" id="s-email" class="box" required="">
            </div>

          </div>

        </div>
        <!-- ========== Shipping-Address Area (End) ========== -->

      </div>

      <div class="box-2"> 

        <!-- ========== Payment-Method Area (Start) ========== -->
        <div class="payment-methods checkout-item">

          <div class="heading"> 
            <h2>支付方式</h2> 
          </div>
          
          <div class="content">
        
            <!-- Payment Method: Direct Bank Transfer -->
            <div class="payment">

              <input type="radio" id="direct-bank-transfer" name="payment" value="DIRECT" checked=""> <!-- Payment Method Radio Button -->
              <label for="direct-bank-transfer">银行转账</label> <!-- Payment Method Label -->

              <!-- Payment Method Content -->
              <div class="payment-body active">
                <p>请直接付款到我们的银行帐户。请使用您的订单ID作为付款参考。您的订单将不会被运送，直到资金到我们的帐户。</p>
              </div>

            </div>

            <!-- Payment Method: Cash On Delivery -->
            <div class="payment">
                    
              <input type="radio" id="cash-on-delivery" name="payment" value="CASH"> <!-- Payment Method Radio Button -->
              <label for="cash-on-delivery">货到付款</label> <!-- Payment Method Label -->
          
              <!-- Payment Method Content -->
              <div class="payment-body">
                <p>请将支票寄到商店名称，商店街道，商店城镇，商店州/县，商店邮政编码。</p>
              </div>

            </div>

            <!-- Payment Method: Paypal -->
            <div class="payment">

              <input type="radio" id="paypal" name="payment" value="PAYPAL"> <!-- Payment Method Radio Button -->
              <label for="paypal">paypal</label> <!-- Payment Method Label -->
        
                <!-- Payment Method Content -->
                <div class="payment-body">
                  <p>通过PayPal支付;如果你没有PayPal账户，你可以用信用卡支付。</p>
                </div>

            </div>

          </div>

        </div>
        <!-- ========== Payment-Method Area (End) ========== -->

        <!-- ========== Cart-Total Area (Start) ========== -->
        <div class="shop-summary checkout-item">

          <div class="heading"> 
            <h2>购物车价格</h2> 
          </div>
        
          <div class="summary-list">
        
            <!-- Subtotal -->
            <div class="summary-item">
              <div class="name summary-box">共计</div> 
              <div class="value summary-box">$300.00</div> 
            </div>
        
            <!-- Delivery Fee -->
            <div class="summary-item">
              <div class="name summary-box">实际支付</div> 
              <div class="value summary-box">$30.00</div> 
            </div>
        
            <!-- Discount -->
            <div class="summary-item">
              <div class="name summary-box">折扣费用</div> 
              <div class="value summary-box">$60.00</div> 
            </div>
        
            <!-- Tax -->
            <div class="summary-item">
              <div class="name summary-box">税收</div> 
              <div class="value summary-box">$30.00</div> 
            </div> 
        
            <!-- Total -->
            <div class="summary-item"> 
              <div class="name summary-box">总计</div>
              <div class="value summary-box">$300.00</div> 
            </div>
        
          </div>
        
        </div>
        
        <!-- ========== Cart-Total Area (End) ========== -->

        <button type="submit" class="btn">下订单</button> <!-- Place Order Button -->

      </div>

    </form>

  </section>
  <!-- ==================== Checkout Area (End) ==================== -->



  <!-- ==================== Footer Area (Start) ==================== -->
  <footer class="footer">
  
    <div class="box-container">
  
      <!-- == Gift Shop Description & Social Account Links == -->
      <div class="footer-item">
  
        <!-- Logo -->
        <a class="logo" href="">
          <img src="static/picture/Logo.png" alt="logo">
          <div class="logo-name">
            <h3>礼物商城</h3>
          </div>
        </a>
        <!-- Description -->
        <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p>
        <!-- Social Account Links -->
        <div class="social">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
  
      </div>
  
      <!-- == Useful Links == -->
      <div class="footer-item">
        <h2>useful links</h2>
        <div class="info links pages">
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="index.html">首页</a></p>
            <p><i class="fas fa-square-full"></i><a href="About.html">关于我们</a></p>
            <p><i class="fas fa-square-full"></i><a href="Login.html">登录</a></p>
            <p><i class="fas fa-square-full"></i><a href="Register.html">注册</a></p>
          </div>
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="Categories.html">商品列表</a></p>
            <p><i class="fas fa-square-full"></i><a href="Product-Single.html">商品详情</a></p>
            <p><i class="fas fa-square-full"></i><a href="Cart.html">购物车</a></p>
            <p><i class="fas fa-square-full"></i><a href="Contact.html">联系我们</a></p>
          </div>
        </div>
      </div>
  
      <!-- == Product Categories == -->
  
  
      <!-- == Contact Information == -->
      <div class='footer-item'>
        <h2>contact info</h2>
        <div class="info connect">
          <p><i class="fas fa-phone"></i><span>+111-222-333</span></p>
          <p><i class="fas fa-phone"></i><span>+123-456-789</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">abc@gmail.com</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">xyz@gmail.com</span></p>
          <p><i class="fas fa-map"></i><span>karachi, pakistan</span></p>
        </div>
      </div>
  
    </div>
  
  </footer>
  <!-- ==================== Footer Area (End) ==================== -->


 
  <!-- Jquery -->
  <script src="static/js/jquery.min.js"></script>

  <!-- Custom Script Files -->
  <script src="static/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
  <script src="static/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
  <script src="static/js/payment-method.js"></script> <!-- Handles website's payment method functionality -->


</body>
</html>

